<template>
  <div class="setting-container">
    <user-bg></user-bg>
    <div class="down-content">
      账号设置
      <i class="el-icon-arrow-down"></i>
    </div>
    <div class="cell-wrap">
      <!-- <mt-cell class="cell" title="头像" is-link to="">
        <div class="head-img">
          <img src="" alt="">
        </div>
      </mt-cell>-->
      <mt-cell class="cell" title="昵称" >
        <span class="name">{{user_info.username}}</span>
      </mt-cell>
      <mt-cell class="cell" title="性别" is-link to>
        <span class="name">{{user_info.sex == 0 ? '男' : '女'}}</span>
      </mt-cell>
      <mt-cell class="cell" title="出生日期" is-link to>
        <span class="name">{{user_info.birthday}}</span>
      </mt-cell>
      <mt-cell class="cell" title="电话" is-link to>
        <span class="name">{{user_info.tel}}</span>
      </mt-cell>
      <mt-cell class="cell" title="密码修改" is-link to="editPassword">
        <span class="name"></span>
      </mt-cell>
    </div>
    <div class="login-out" @click="loginOut()">退出</div>
    <bot-contact></bot-contact>
  </div>
</template>

<script>
import userBg from "@/components/userBg";
import botContact from "@/components/botContact";
import { Toast } from "mint-ui";
import { Cell } from "mint-ui";
import constant from "@/util/constant";
import http from "@/util/http";
export default {
  name: "index",
  data() {
    return {
      user: {
        oldPassword: "",
        newPassword: "",
        newPassword2: ""
      },
      user_info: {}
    };
  },
  components: {
    userBg,
    botContact,
    Cell
  },
  computed: {},
  created() {
    this.userinfo();
  },
  mounted() {
    this.userinfo();
  },
  methods: {
    loginOut() {
      localStorage.removeItem("user_token");
      localStorage.removeItem("user_name");
      window.location.href = "/";
    },
    userinfo() {
      http.get(this, {
        url: "ucenter/user_info",
        data: {
          token: localStorage.getItem("user_token")
        },
        dataType: "json",
        success: function(data) {
          console.log("用户信息:", data);
          if (data.status == 1) {
            this.user_info = data.info;
          } else {
          }
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.promise(@css, @args) {
  @{css}: @args;
  -webkit-@{css}: @args;
  -moz-@{css}: @args;
  -ms-@{css}: @args;
  -o-@{css}: @args;
}
.setting-container {
  padding-bottom: 140/37.5rem;
  .down-content {
    width: 100%;
    height: 90/37.5rem;
    line-height: 90/37.5rem;
    text-align: center;
    color: #666;
    font-size: 32/37.5rem;
    background: #fff;
    border-bottom: 12/37.5rem solid #eee;
  }
  .cell-wrap {
    .cell {
      color: #888;
      font-size: 24/37.5rem;
    }
    .head-img {
      width: 54/37.5rem;
      height: 54/37.5rem;
      overflow: hidden;
      text-align: center;
      position: relative;
      border: 1px solid #ccc;
      .promise(border-radius, 50%);
      img {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        z-index: 10;
      }
    }
  }
  .login-out {
    width: 100%;
    height: 80/37.5rem;
    font-size: 24/37.5rem;
    color: #666;
    line-height: 80/37.5rem;
    text-align: center;
    background: #eee;
    margin-bottom: 2rem;
  }
}
</style>
